<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">


    <!-- 引入 CDN Crypto.js 开始 AES加密 注意引入顺序 -->
  <!-- 加密 -->
  <script src="https://cdn.bootcss.com/crypto-js/3.1.9-1/crypto-js.min.js"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/core.min.js"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/enc-base64.min.js"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/md5.min.js"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/evpkdf.min.js"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/cipher-core.min.js"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/aes.min.js"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/pad-pkcs7.min.js"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/mode-ecb.min.js"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/enc-utf8.min.js"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/enc-hex.min.js"></script>-->
  <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.4/css/layui.css">
    <!-- 引入 CDN Crypto.js 结束 -->
    <title>Title</title>
</head>
<body>
<form action="" >
    <input type="text" id="name">
    <input type="submit" value="提交" id="btn" onclick="return false">
</form>

</body>
</html>


<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://www.layuicdn.com/layui-v2.6.4/layui.js"></script>
<script type="text/javascript">

    /*加密参数*/
    const KEY = 'Lv3ro5gmnT1svLFG', IV = 'TL0Kqiqydyb9FDGL';

    $('#btn').on('click',function(){
        let randStr = _getRandomString(4);
        // let name =  $('#name').val() + '-'+randStr ;
        let name =  $('#name').val();
        let nowTime = Date.parse(new Date()).toString();
        let jsOb = {'name':name,'nowTime':nowTime}
        let jsonStr = JSON.stringify(jsOb);
        let enData = encrypt(jsonStr,KEY, IV)

        let post_data = {'enData':enData.toString()}
        $.post('http://localhost/php/demo26/demo3/js-encryption-php-decryption/demo1.php',{post_data:post_data},function(res){
             let data = JSON.stringify(res.data)
            // console.log(typeof data)
                if(res.status==200){
                    layer.alert(data)
                }
            },'JSON');
    });





    /**
     * 接口数据加密函数
     * @param str string 需加密的json字符串
     * @param key string 加密key(16位)
     * @param iv string 加密向量(16位)
     * @return string 加密密文字符串
     */
    function encrypt(str, key, iv) {
        //密钥16位
        var key = CryptoJS.enc.Utf8.parse(key);
        //加密向量16位
        var iv = CryptoJS.enc.Utf8.parse(iv);
        var encrypted = CryptoJS.AES.encrypt(str, key, {
            iv: iv,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        });
        return encrypted;
    }









    /**
     * 接口数据解密函数
     * @param str string 已加密密文
     * @param key string 加密key(16位)
     * @param iv string 加密向量(16位)
     * @returns {*|string} 解密之后的json字符串
     */
    function decrypt(str, key, iv) {
        //密钥16位
        var key = CryptoJS.enc.Utf8.parse(key);
        //加密向量16位
        var iv = CryptoJS.enc.Utf8.parse(iv);
        var decrypted = CryptoJS.AES.decrypt(str, key, {
            iv: iv,
            padding: CryptoJS.pad.Pkcs7
        }).toString(CryptoJS.enc.Utf8);

        return decrypted;
    }






    function _getRandomString(len) {
        len = len || 32;
        var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; // 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
        var maxPos = $chars.length;
        var pwd = '';
        for (i = 0; i < len; i++) {
            pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    }
</script>